<!-- 监控设备 -->
<template>
  <div class="con">
    <el-row  gutter="20" style="height:100%">
      <el-col :span="4" >
        <div class="left" style="height:100%">
          <div class="iconC">
            <iconpark-icon size="28" name="xunjianxinxi"></iconpark-icon
            ><span>监控设备</span>
          </div>
          <div class="list">
            <div class="listC">
              <iconpark-icon size="22" name="xunjianzubie"></iconpark-icon>
              <span>区域分布</span>
            </div>
            <el-tree
              :data="data"
              :props="defaultProps"
              accordion
              @node-click="handleNodeClick"
            >
            </el-tree>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="center">
          <div class="videoC">
            监控视频监控视频监控视频监控视频监控视频监控视频监控视频监控视频监控视频
            监控视频监控视频监控视频监控视频监控视频监控视频监控视频监控视频监控视频
            监控视频监控视频监控视频监控视频监控视频监控视频监控视频监控视频监控视频
            监控视频监控视频监控视频监控视频监控视频监控视频监控视频监控视频监控视频
            监控视频监控视频监控视频监控视频监控视频监控视频监控视频监控视频监控视频
            监控视频监控视频监控视频监控视频监控视频监控视频监控视频监控视频监控视频
            监控视频监控视频监控视频监控视频监控视频监控视频监控视频监控视频监控视频
            监控视频监控视频监控视频监控视频监控视频监控视频监控视频监控视频监控视频
            监控视频监控视频监控视频监控视频监控视频监控视频监控视频监控视频监控视频
            监控视频监控视频监控视频监控视频监控视频监控视频监控视频监控视频监控视频
            监控视频监控视频监控视频监控视频监控视频监控视频监控视频监控视频监控视频
            监控视频监控视频监控视频监控视频监控视频监控视频监控视频监控视频监控视频
            监控视频监控视频监控视频监控视频监控视频监控视频监控视频监控视频监控视频
            监控视频监控视频监控视频监控视频监控视频监控视频监控视频监控视频监控视频
            监控视频监控视频监控视频监控视频监控视频监控视频监控视频监控视频监控视频
            监控视频监控视频监控视频监控视频监控视频监控视频监控视频监控视频监控视频
            监控视频监控视频监控视频监控视频监控视频监控视频监控视频监控视频监控视频
            监控视频监控视频监控视频监控视频监控视频监控视频监控视频监控视频监控视频
            监控视频监控视频监控视频监控视频监控视频监控视频监控视频监控视频监控视频
            监控视频监控视频监控视频监控视频监控视频监控视频监控视频监控视频监控视频
            监控视频监控视频监控视频监控视频监控视频监控视频监控视频监控视频监控视频
            监控视频监控视频监控视频监控视频监控视频监控视频监控视频监控视频监控视频
            监控视频监控视频监控视频监控视频监控视频监控视频监控视频监控视频监控视频
            监控视频监控视频监控视频监控视频监控视频监控视频监控视频监控视频监控视频
            监控视频监控视频监控视频监控视频监控视频监控视频监控视频监控视频监控视频
          </div>
          <div class="control">
            <div class="controlL">
              <div @click="clickUp" class="up"></div>
              <div @click="clickDown" class="down"></div>
              <div @click="clickLeft" class="left"></div>
              <div @click="clickRight" class="right"></div>
              <div @click="clickCenter" class="center"></div>
            </div>
            <div class="controlM">
              <div class="fangda"></div>
              <div class="yuanjiao"></div>
              <div class="fullscrall"></div>
            </div>
            <div class="controlR">
              <div class="openMak"></div>
              <div class="closeMac"></div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="right">
          <div class="title">
            <span>区域监控信息</span>
          </div>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="devName" label="设备名称"> </el-table-column>
            <el-table-column prop="isOnline" label="是否在线">
              <template slot-scope="scope">
                <span :class="scope.row.isOnline == 0 ? 'outline' : 'online'">
                  {{ scope.row.isOnline == 0 ? "离线" : "在线" }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="devpp" label="设备品牌"> </el-table-column>
            <el-table-column prop="cz" label="操作"> </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "MonitorDev",
  data() {
    return {
      tableData: [
        {
          devName: "name1",
          isOnline: 0,
          devpp: "品牌1",
          cz: "操作",
        },
        {
          devName: "name1",
          isOnline: 1,
          devpp: "品牌1",
          cz: "操作",
        },
        {
          devName: "name1",
          isOnline: 0,
          devpp: "品牌1",
          cz: "操作",
        },
        {
          devName: "name1",
          isOnline: 1,
          devpp: "品牌1",
          cz: "操作",
        },
        {
          devName: "name1",
          isOnline: 0,
          devpp: "品牌1",
          cz: "操作",
        },
        {
          devName: "name1",
          isOnline: 1,
          devpp: "品牌1",
          cz: "操作",
        },
        {
          devName: "name1",
          isOnline: 0,
          devpp: "品牌1",
          cz: "操作",
        },
        {
          devName: "name1",
          isOnline: 1,
          devpp: "品牌1",
          cz: "操作",
        },
        {
          devName: "name1",
          isOnline: 0,
          devpp: "品牌1",
          cz: "操作",
        },
        {
          devName: "name1",
          isOnline: 1,
          devpp: "品牌1",
          cz: "操作",
        },
      ],
      data: [
        {
          label: "一区",
          children: [
            {
              label: "二级 1-1",
              children: [
                {
                  label: "三级 1-1-1",
                },
              ],
            },
          ],
        },
        {
          label: "二区",
          children: [
            {
              label: "二级 2-1",
              children: [
                {
                  label: "三级 2-1-1",
                },
              ],
            },
            {
              label: "二级 2-2",
              children: [
                {
                  label: "三级 2-2-1",
                },
              ],
            },
          ],
        },
        {
          label: "三区",
          children: [
            {
              label: "二级 3-1",
              children: [
                {
                  label: "三级 3-1-1",
                },
              ],
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1",
                },
              ],
            },
          ],
        },
        {
          label: "四区",
          children: [
            {
              label: "二级 3-1",
              children: [
                {
                  label: "三级 3-1-1",
                },
              ],
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1",
                },
              ],
            },
          ],
        },
        {
          label: "五区",
          children: [
            {
              label: "二级 3-1",
              id: "bdbsdfgdfgsb",
            },
            {
              label: "二级 3-2",
              id: "bdb76t34rgbb",
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  methods: {
    handleNodeClick(data) {
      // alert(data)
      console.log(data);
    },
    clickUp() {
      alert("监控画面向上");
    },
    clickDown() {
      alert("监控画面向下");
    },
    clickLeft() {
      alert("监控画面向左");
    },
    clickRight() {
      alert("监控画面向右");
    },
    clickCenter() {
      alert("监控画面重置");
    },
  },
};
</script>

<style lang="less" scoped>
@import "@/assets/style/table.less";
::v-deep .el-tree-node {
  padding: 5px;
}

.con {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  background-color: #0c323a;
  .left {
    height: 100%;
    background-color: #002127;
    border-radius: 10px;
    .iconC {
      padding-top: 15px;
      padding-left: 15px;
      margin-bottom: 15px;
      box-sizing: border-box;
      height: 35px;
      span {
        margin-left: 8px;
        display: inline-block;
        height: 35px;
        line-height: 35px;
        font-size: 24px;
        vertical-align: bottom;
        color: white;
      }
    }
    .list {
      padding-top: 10px;
      margin-left: 20px;
      padding-left: 20px;
      .listC {
        height: 22px;
        margin-bottom: 3px;
        span {
          margin-left: 8px;
          display: inline-block;
          height: 22px;
          line-height: 22px;
          vertical-align: top;
          color: white;
          font-size: 18px;
        }
      }
    }
  }
  .center {
    height: 100%;
    background-color: #002127;
    border-radius: 10px;
    overflow: hidden;
    .videoC {
      width: 100%;
      height: 65.3%;
      background-color: black;
      color: white;
      text-align: center;
    }
    .control {
      display: flex;
      justify-content: space-around;
      width: 100%;
      height: 262px;
      margin-top: 10px;
      .controlL {
        position: relative;
        width: 262px;
        height: 262px;
        .up {
          cursor: pointer;
          position: absolute;
          width: 116px;
          height: 62px;
          background-image: url("@/assets/img/up.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
          background-color: transparent;
          top: 0;
          left: calc(50% - 58px);
        }
        .down {
          cursor: pointer;
          position: absolute;
          width: 116px;
          height: 62px;
          background-image: url("@/assets/img/down.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
          background-color: transparent;
          bottom: 0;
          left: calc(50% - 58px);
        }
        .left {
          cursor: pointer;
          position: absolute;
          width: 62px;
          height: 116px;
          background-image: url("@/assets/img/left.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
          background-color: transparent;
          top: calc(50% - 58px);
          left: 0;
        }
        .right {
          cursor: pointer;
          position: absolute;
          width: 62px;
          height: 116px;
          background-image: url("@/assets/img/right.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
          background-color: transparent;
          right: 0;
          top: calc(50% - 58px);
        }
        .center {
          border-radius: 50%;
          cursor: pointer;
          position: absolute;
          width: 92px;
          height: 92px;
          background-image: url("@/assets/img/center.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
          background-color: transparent;
          top: calc(50% - 46px);
          left: calc(50% - 46px);
        }
      }
      .controlM {
        width: 90px;
        height: 262px;
        display: flex;
        flex-direction: column;
        div {
          height: 90px;
          width: 90px;
          border-radius: 50%;
        }
        .fangda {
          background-image: url("@/assets/img/fangda.png");
          background-repeat: no-repeat;
          background-size: cover;
        }
        .yuanjiao {
          background-image: url("@/assets/img/yuanjiao.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }
        .fullscrall {
          background-image: url("@/assets/img/fullscrall.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }
      }
      .controlR {
        width: 90px;
        height: 262px;
        display: flex;
        flex-direction: column;
        div {
          height: 130px;
          width: 90px;
          border-radius: 50%;
        }
        .closeMac {
          background-image: url("@/assets/img/closeMac.png");
          background-repeat: no-repeat;
          background-size: cover;
        }
        .openMak {
          background-image: url("@/assets/img/openMak.png");
          background-repeat: no-repeat;
          background-size: cover;
        }
      }
    }
  }
  .right {
    height: 100%;
    background-color: #002127;
    border-radius: 10px;
    .title {
      height: 35px;
      padding-top: 15px;
      padding-left: 15px;
      margin-bottom: 25px;
      box-sizing: border-box;
      span {
        font-size: 24px;
        color: white;
      }
    }
  }
}

.outline {
  color: #ff1818;
}
.online {
  color: #1eff00;
}
::v-deep .el-col{
  height: 100%;
}
</style>